<template>
	<div class="app-container">
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="区（县）人口和建筑物信息" name="first">
				<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px" v-show="showSearch">
					<el-form-item label="省" prop="provinceId">
						<el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
							<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="市" prop="cityId">
						<el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
							<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="区/县" prop="prefectureId">
						<el-select v-model="queryParams.prefectureId" placeholder="请选择区/县" clearable>
							<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery">搜索</el-button>
						<el-button plain @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8" style="float:left">
					<el-col :span="1.5">
						<el-button type="primary" @click="handleAdd">新增</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button plain icon="Download" @click="handleImport(1)">导入</el-button>
					</el-col>
				</el-row>

				<div style="text-align: right;float: right;">
					<span>排列方式：</span>
					<el-radio-group v-model="queryParams.option" @change="optionChange">
						<el-radio label="0">行政区划</el-radio>
						<el-radio label="1">更新时间倒序</el-radio>
					</el-radio-group>
					<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
				</div>

				<el-table v-loading="loading" :data="dataList" stripe>
					<el-table-column label="省" align="center" prop="province" />
					<el-table-column label="市" align="center" prop="city" />
					<el-table-column label="区（县）" align="center" prop="prefecture" />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template #default="scope">
							<el-button type="text" @click="handleUpdate(scope.row)">修改</el-button>
							<el-button type="text" @click="handleDetail(scope.row)">查看</el-button>
							<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page"
					v-model:limit="queryParams.rows" @pagination="getList" />
			</el-tab-pane>
			<el-tab-pane label="乡镇（街道）人口和建筑物信息" name="second">
				<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px" v-show="showSearch">
					<el-form-item label="省" prop="provinceId">
						<el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
							<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="市" prop="cityId">
						<el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
							<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="区/县" prop="prefectureId">
						<el-select v-model="queryParams.prefectureId" placeholder="请选择区/县" clearable>
							<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="乡镇（街道）" prop="villageTown">
						<el-input v-model="queryParams.villageTown" placeholder="请输入乡镇（街道）" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery1">搜索</el-button>
						<el-button plain @click="resetQuery1">重置</el-button>
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8" style="float:left">
					<el-col :span="1.5">
						<el-button type="primary" @click="handleAdd">新增</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button plain icon="Download" @click="handleImport(2)">导入</el-button>
					</el-col>
				</el-row>

				<div style="text-align: right;float: right;">
					<span>排列方式：</span>
					<el-radio-group v-model="queryParams.option" @change="optionChange">
						<el-radio label="0">行政区划</el-radio>
						<el-radio label="1">更新时间倒序</el-radio>
					</el-radio-group>
					<right-toolbar v-model:showSearch="showSearch" @queryTable="getList1"></right-toolbar>
				</div>

				<el-table v-loading="loading" :data="dataList" stripe>
					<el-table-column label="省" align="center" prop="province" />
					<el-table-column label="市" align="center" prop="city" />
					<el-table-column label="区（县）" align="center" prop="prefecture" />
					<el-table-column label="乡镇（街道）" align="center" prop="villageTown" />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template #default="scope">
							<el-button type="text" @click="handleUpdate(scope.row)">修改</el-button>
							<el-button type="text" @click="handleDetail(scope.row)">查看</el-button>
							<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page"
					v-model:limit="queryParams.rows" @pagination="getList1" />
			</el-tab-pane>
		</el-tabs>
		<!-- 添加/查看/修改弹出框 -->
		<el-dialog :title="title" v-model="open" width="850px" append-to-body>
			<p class="dialogTitle">{{ title }}</p>
			<el-form ref="housingCostRef" :model="form" :rules="rules" label-width="150px" style="padding:0 40px 0px 20px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="省" prop="provinceId" label-width="100px">
							<el-select v-model="form.provinceId" placeholder="请选择省" @change="chooseProvince"
								:disabled="title != '新增人口和建筑物概况'">
								<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="市" prop="cityId" label-width="100px">
							<el-select v-model="form.cityId" placeholder="请选择市" @change="chooseCity"
								:disabled="title != '新增人口和建筑物概况'">
								<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="区（县）" prop="prefectureId" label-width="100px">
							<el-select v-model="form.prefectureId" placeholder="请选择区/县" :disabled="title != '新增人口和建筑物概况'">
								<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="isShowVillageTown">
					<el-col :span="14">
						<el-form-item label="乡镇（街道）" prop="villageTown">
							<el-input v-model="form.villageTown" placeholder="请输入乡镇（街道）"
								:disabled="title != '新增人口和建筑物概况'" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" v-if="activeName == 'first'">
						<el-form-item label="区县面积（km²）" prop="dhpCountyArea">
							<el-input v-model="form.dhpCountyArea" placeholder="请输入区县面积" :disabled="idDetail" />
						</el-form-item>
					</el-col>
					<el-col :span="12" v-else-if="activeName == 'second'">
						<el-form-item label="乡镇面积（km²）" prop="dhpCountyArea">
							<el-input v-model="form.dhpCountyArea" placeholder="请输入乡镇面积" :disabled="idDetail" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="总人口（万）" prop="dhpTotalPop">
							<el-input v-model="form.dhpTotalPop" placeholder="请输入总人口" :disabled="idDetail" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="城镇人口（万）" prop="dhpTownPop">
							<el-input v-model="form.dhpTownPop" placeholder="请输入城镇人口" :disabled="idDetail" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="农村人口（万）" prop="dhpVillagePop">
							<el-input v-model="form.dhpVillagePop" placeholder="请输入农村人口" :disabled="idDetail" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="人口比例（%）">
					<el-input type="hidden" />
					<div style="width:710px" class="ratio">
						<div class="ratioContent">
							<p class="ratioHead">少年儿（%）</p>
							<p class="inp">
								<el-form-item prop="dhpYoungRatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpYoungRatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">中青年（%）</p>
							<p class="inp">
								<el-form-item prop="dhpMiddleRatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpMiddleRatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">老年（%）</p>
							<p class="inp">
								<el-form-item prop="dhpOldTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpOldTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
					</div>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="住宅房屋占比（%）" prop="dhpHouseTatio">
							<el-input v-model="form.dhpHouseTatio" placeholder="请输入住宅房屋占比" :disabled="idDetail" />
						</el-form-item>
					</el-col>
					<el-col :span="12"></el-col>
					<el-col :span="12">
						<el-form-item label="城镇地区建筑占总体建筑物的比例（%）" prop="dhpTownTatio">
							<el-input v-model="form.dhpTownTatio" placeholder="请输入城镇地区建筑占总体建筑物的比例" :disabled="idDetail" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="城镇地区结构类型占比（%）" required>
					<el-input type="hidden" />
					<div style="width:710px" class="ratio">
						<div class="ratioContent">
							<p class="ratioHead">高层建筑占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownHighTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownHighTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">钢结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownSteelTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownSteelTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">多层钢筋混凝土结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownBetonTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownBetonTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">砖混结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownBrickTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownBrickTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">砖木结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownMasonryTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownMasonryTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">土结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownSoilTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownSoilTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">木结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownWoodTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownWoodTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">石结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownStoneTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownStoneTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">其他结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownOtherTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownOtherTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="城镇地区年代类型占比（%）">
					<el-input type="hidden" />
					<div style="width:710px" class="ratio">
						<div class="ratioContent">
							<p class="ratioHead">1970年以前（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownSevenBeforeTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownSevenBeforeTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">1971年-1980年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownSevenTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownSevenTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">1981年-1990年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownEightTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownEightTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">1991年-2000年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownNineTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownNineTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2001年-2010年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownZeroTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownZeroTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2011年-2015年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownTenTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownTenTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2016年-2020年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownSixteenTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownSixteenTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2021年及以后占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpTownTwentyOneTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpTownTwentyOneTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
					</div>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="城镇地区室内财产（元/每平米）" prop="dhpTownIndoorProperty">
							<el-input v-model="form.dhpTownIndoorProperty" placeholder="请输入城镇地区室内财产" :disabled="idDetail" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="农村地区结构类型占比（%）" required>
					<el-input type="hidden" />
					<div style="width:710px" class="ratio">
						<div class="ratioContent">
							<p class="ratioHead">高层建筑占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageHighTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageHighTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">钢结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageSteelTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageSteelTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">多层钢筋混凝土结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageBetonTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageBetonTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">砖混结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageBrickTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageBrickTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">砖木结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageMasonryTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageMasonryTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">土结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageSoilTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageSoilTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">木结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageWoodTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageWoodTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">石结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageStoneTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageStoneTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">其他结构占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageOtherTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageOtherTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="农村地区年代类型占比（%）">
					<el-input type="hidden" />
					<div style="width:710px" class="ratio">
						<!-- <div class="ratioContent">
							<p class="ratioHead">1970年以前占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillageSevenBeforeTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillageSevenBeforeTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div> -->
						<div class="ratioContent">
							<p class="ratioHead">1980年及以前占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillage1980Before">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillage1980Before"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">1981年-1990年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillage8190Tatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillage8190Tatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">1991年-2000年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillage9100Tatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillage9100Tatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2001年-2010年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillage0110Tatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillage0110Tatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2011年-2015年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillage1115Tatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillage1115Tatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2016年-2020年占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillage1620Tatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillage1620Tatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
						<div class="ratioContent">
							<p class="ratioHead">2021年及以后占比（%）</p>
							<p class="inp">
								<el-form-item prop="dhpVillage21AfterTatio">
									<el-input style="width: 95%" size="small" v-model="form.dhpVillage21AfterTatio"
										:disabled="idDetail" />
								</el-form-item>
							</p>
						</div>
					</div>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="农村地区室内财产（元/每平米）" prop="dhpVillageIndoorProperty">
							<el-input v-model="form.dhpVillageIndoorProperty" placeholder="请输入农村地区室内财产"
								:disabled="idDetail" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm" v-if="!idDetail">确定</el-button>
					<el-button plain @click="cancel">取消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 导入对话框 -->
		<el-dialog :title="upload.title" v-if="upload.open" v-model="upload.open" width="400px" append-to-body>
			<p></p>
			<el-upload ref="uploadRef" :limit="1" :accept="['.xls', '.xlsx']" :headers="upload.headers"
				:action="name == '区县人口和建筑物概况信息模板.xls' ? upload.url : upload.url1" :disabled="upload.isUploading"
				:before-upload="handleFileBeforeUpload" :on-progress="handleFileUploadProgress"
				:on-error="handleFileUploadError" :on-success="handleFileSuccess" :auto-upload="false" drag>
				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<template #tip>
					<div class="el-upload__tip text-center">
						<span>仅允许导入xls格式文件。</span>
						<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
							@click="importTemplate(name)">下载模板</el-link>
					</div>
				</template>
			</el-upload>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitFileForm">确 定</el-button>
					<el-button plain @click="upload.open = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="populationBuildProfiles">
import { getToken } from "@/utils/auth";
import { getProvince, getChildArea } from "@/api/system/division";
import { getLanderRoles, getLanderProvince } from "@/api/basedatamanage/common.js"
import { getAllPeoBuildData, getAllVillageTownHosPeo, saveBuildPeoData, saveVillageTownData, updateBuildPeoData, updateVillageTownData, getPeoBuildData, getVillageTownData, delPeoBuildData, delVillageTownData, coverPeoBuildData, coverVillageTownData } from "@/api/basedatamanage/populationBuildProfiles.js";
import { ElMessageBox } from 'element-plus'
const {
	proxy
} = getCurrentInstance();
const activeName = ref("first");
const dataList = ref([]);
const loading = ref(false);
const open = ref(false);
const isShowVillageTown = ref(false); // 是否展示乡镇（街道）
const total = ref(0);
const title = ref("");
const showSearch = ref(true);
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
const idDetail = ref(false);
const name = ref(''); // 模版名字

/*** 导入参数 */
const upload = reactive({
	open: false,
	title: "",
	isUploading: false,
	headers: { token: "token " + getToken() },
	url: import.meta.env.VITE_APP_BASE_API + "/fxfzypg/baseData/hosPeoImportExcel",
	url1: import.meta.env.VITE_APP_BASE_API + "/fxfzypg/baseData/villageTown/hosPeoImportExcel"
});


// 最多保留两位小数
const positive2decimals = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		callback(new Error());
	} else if (value.indexOf(".") != -1 && (value.split('.').length > 2 || value.split('.')[0] === '' || value.split('.')[1] === '')) {
		callback(new Error()) //防止输入多个小数点
	} else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
		callback(new Error()) //小数点后两位
	} else {
		callback();
	}
}

// 最多保留四位小数
const positive4decimals = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		callback(new Error());
	} else if (value.indexOf(".") != -1 && (value.split('.').length > 2 || value.split('.')[0] === '' || value.split('.')[1] === '')) {
		callback(new Error()) //防止输入多个小数点
	} else if (value.indexOf(".") != -1 && value.split('.')[1].length > 4) {
		callback(new Error()) //小数点后两位
	} else {
		callback();
	}
}

// 最多保留两位小数
const positive22decimals = (rule, value, callback) => {
	value = String(value)
	console.log(value,'=====');
	if(!value){
		callback();
	}else{
		if (isNaN(value)) {
		callback(new Error());
	} else if (value.indexOf(".") != -1 && (value.split('.').length > 2 || value.split('.')[0] === '' || value.split('.')[1] === '')) {
		callback(new Error()) //防止输入多个小数点
	} else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
		callback(new Error()) //小数点后两位
	} else {
		callback();
	}
	}
}

// 最多保留四位小数
const positive44decimals = (rule, value, callback) => {
	value = String(value)
	console.log(value,'lalallalal');
	if(!value){
		callback();
	}else{
		if (isNaN(value)) {
		callback(new Error());
	} else if (value.indexOf(".") != -1 && (value.split('.').length > 2 || value.split('.')[0] === '' || value.split('.')[1] === '')) {
		callback(new Error()) //防止输入多个小数点
	} else if (value.indexOf(".") != -1 && value.split('.')[1].length > 4) {
		callback(new Error()) //小数点后两位
	} else {
		callback();
	}
	}
}
const data = reactive({
	queryParams: {
		page: 1,
		rows: 10,
		provinceId: '',
		cityId: '',
		prefectureId: '',
		option: '0'
	},
	form: {
		provinceId: '',
		cityId: '',
		prefectureId: '',
		dhpCountyArea: '',
		dhpTotalPop: '',
		dhpTownPop: '',
		dhpVillagePop: '',
		dhpYoungRatio: '',
		dhpMiddleRatio: '',
		dhpOldTatio: '',
		dhpHouseTatio: '',
		dhpTownTatio: '',
		dhpTownHighTatio: '',
		dhpTownSteelTatio: '',
		dhpTownBetonTatio: '',
		dhpTownBrickTatio: '',
		dhpTownMasonryTatio: '',
		dhpTownSoilTatio: '',
		dhpTownWoodTatio: '',
		dhpTownStoneTatio: '',
		dhpTownOtherTatio: '',
		dhpTownSevenBeforeTatio: '',
		dhpTownSevenTatio: '',
		dhpTownEightTatio: '',
		dhpTownNineTatio: '',
		dhpTownZeroTatio: '',
		dhpTownTenTatio: '',
		dhpTownSixteenTatio: '',
		dhpTownTwentyOneTatio: '',
		dhpTownIndoorProperty: '',
		dhpVillageHighTatio: '',
		dhpVillageSteelTatio: '',
		dhpVillageBetonTatio: '',
		dhpVillageBrickTatio: '',
		dhpVillageMasonryTatio: '',
		dhpVillageSoilTatio: '',
		dhpVillageWoodTatio: '',
		dhpVillageStoneTatio: '',
		dhpVillageOtherTatio: '',
		dhpVillageSevenBeforeTatio: '',
		dhpVillage1980Before: '',
		dhpVillage8190Tatio: '',
		dhpVillage9100Tatio: '',
		dhpVillage0110Tatio: '',
		dhpVillage1115Tatio: '',
		dhpVillage1620Tatio: '',
		dhpVillage21AfterTatio: '',
		dhpVillageIndoorProperty: '',
	},
	rules: {
		provinceId: [{
			required: true,
			message: '请选择省',
			trigger: 'change'
		}],
		cityId: [{
			required: true,
			message: '请选择市',
			trigger: 'change'
		}],
		prefectureId: [{
			required: true,
			message: '请选择区/县',
			trigger: 'change'
		}],
		villageTown: [{
			required: true,
			message: '请输入乡镇（街道）',
			trigger: 'blur'
		}],
		dhpCountyArea: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTotalPop: [{
			required: true,
			message: '请输入正确数值，最多保留四位小数',
			trigger: 'blur',
			validator: positive4decimals
		}],
		dhpTownPop: [{
			required: false,
			// message: '请输入正确数值，最多保留四位小数',
			trigger: 'blur',
			validator: positive44decimals
		}],
		dhpVillagePop: [{
			required: false,
			// message: '请输入正确数值，最多保留四位小数',
			trigger: 'blur',
			validator: positive44decimals
		}],
		dhpYoungRatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpMiddleRatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpOldTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpHouseTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownHighTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownSteelTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownBetonTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownBrickTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownMasonryTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownSoilTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownWoodTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownStoneTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownOtherTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpTownSevenBeforeTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownSevenTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownEightTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownNineTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownZeroTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownTenTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownSixteenTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownTwentyOneTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpTownIndoorProperty: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageHighTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageSteelTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageBetonTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageBrickTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageMasonryTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageSoilTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageWoodTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageStoneTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageOtherTatio: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
		dhpVillageSevenBeforeTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillage1980Before: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillage8190Tatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillage9100Tatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillage0110Tatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillage1115Tatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillage1620Tatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillage21AfterTatio: [{
			required: false,
			// message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive22decimals
		}],
		dhpVillageIndoorProperty: [{
			required: true,
			message: '请输入正确数值，最多保留两位小数',
			trigger: 'blur',
			validator: positive2decimals
		}],
	}
})
const {
	queryParams,
	form,
	rules
} = toRefs(data)


// 模板下载
function importTemplate(name) {
	proxy.download("/base/product/downloadExcel", {
		fileName: name
	}, name);
};

/** 提交上传文件 */
function submitFileForm() {
	proxy.$refs["uploadRef"].submit();
};

/** 打开导入表弹窗 */
function handleImport(num) {
	if (num == 1) {
		name.value = '区县人口和建筑物概况信息模板.xls'
	} else {
		name.value = '乡镇（街道）人口和建筑物概况信息.xls';
	}
	upload.title = "导入";
	upload.open = true;
}

/**文件上传前处理 */
function handleFileBeforeUpload(file) {
	proxy.$modal.loading("正在上传文件，请稍候...");
	return true
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
	upload.isUploading = true;
};
// 上传失败
function handleFileUploadError(err) {
	proxy.$modal.closeLoading();
	proxy.$modal.msgError("上传文件失败");
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
	upload.open = false;
	upload.isUploading = false;
	proxy.$modal.closeLoading();
	proxy.$refs["uploadRef"].handleRemove(file);
	if (response.code == 500) {
		ElMessageBox.alert(response.message, '消息', {
			type: 'warning',
			confirmButtonText: '确定',
			dangerouslyUseHTMLString: true,
			callback: () => {
			},
		})
	} else {
		if (response.data) {
			ElMessageBox.confirm(
				response.message,
				'消息',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					dangerouslyUseHTMLString: true,
					cancelButtonClass: 'is-plain',
				}
			)
				.then(() => {
					if (activeName.value=='first') {
						coverPeoBuildData(response.data).then(res => {
							proxy.$modal.msgSuccess(res.data);
							getList();
						})
					} else {
						coverVillageTownData(response.data).then(res => {
							proxy.$modal.msgSuccess(res.data);
							getList1();
						})
					}
				})
				.catch(() => {
					// ElMessage({
					// 	type: 'info',
					// 	message: 'Delete canceled',
					// })
				})
			// ElMessageBox.alert(response.message, '消息', {
			// 	confirmButtonText: '确定',
			// 	cancelButtonText: '取消',
			// 	type: 'warning',
			// 	dangerouslyUseHTMLString: true,
			// 	callback: () => {
			// 		if (name.value == '区县人口和建筑物概况信息模板.xls') {
			// 			coverPeoBuildData(response.data).then(res => {
			// 				proxy.$modal.msgSuccess("覆盖成功");
			// 				getList();
			// 			})
			// 		} else {
			// 			coverVillageTownData(response.data).then(res => {
			// 				proxy.$modal.msgSuccess("覆盖成功");
			// 				getList();
			// 			})
			// 		}
			// 	},
			// })
		} else {
			ElMessageBox.alert(response.message, '消息', {
				type: 'success',
				confirmButtonText: '确定',
				dangerouslyUseHTMLString: true,
				callback: () => {
					getList();
				},
			})
		}
	}
};

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.page = 1;
	getList();
}
/** 搜索按钮操作 */
function handleQuery1() {
	queryParams.value.page = 1;
	getList1();
}
/** 重置按钮操作 */
function resetQuery() {
	dataList.value = [];
	proxy.resetForm("queryRef");
	handleQuery();
}
/** 重置按钮操作 */
function resetQuery1() {
	dataList.value = [];
	proxy.resetForm("queryRef");
	handleQuery1();
}

// 切换排序
function optionChange(val) {
	if (activeName.value == 'first') {
		handleQuery()
	} else if (activeName.value == 'second') {
		handleQuery1()
	}
}

// 重置表单
function reset() {
	form.value = {
		provinceId: '',
		cityId: '',
		prefectureId: '',
		dhpCountyArea: '',
		dhpTotalPop: '',
		dhpTownPop: '',
		dhpVillagePop: '',
		dhpYoungRatio: '',
		dhpMiddleRatio: '',
		dhpOldTatio: '',
		dhpHouseTatio: '',
		dhpTownTatio: '',
		dhpTownHighTatio: '',
		dhpTownSteelTatio: '',
		dhpTownBetonTatio: '',
		dhpTownBrickTatio: '',
		dhpTownMasonryTatio: '',
		dhpTownSoilTatio: '',
		dhpTownWoodTatio: '',
		dhpTownStoneTatio: '',
		dhpTownOtherTatio: '',
		dhpTownSevenBeforeTatio: '',
		dhpTownSevenTatio: '',
		dhpTownEightTatio: '',
		dhpTownNineTatio: '',
		dhpTownZeroTatio: '',
		dhpTownTenTatio: '',
		dhpTownSixteenTatio: '',
		dhpTownTwentyOneTatio: '',
		dhpTownIndoorProperty: '',
		dhpVillageHighTatio: '',
		dhpVillageSteelTatio: '',
		dhpVillageBetonTatio: '',
		dhpVillageBrickTatio: '',
		dhpVillageMasonryTatio: '',
		dhpVillageSoilTatio: '',
		dhpVillageWoodTatio: '',
		dhpVillageStoneTatio: '',
		dhpVillageOtherTatio: '',
		dhpVillageSevenBeforeTatio: '',
		dhpVillage1980Before: '',
		dhpVillage8190Tatio: '',
		dhpVillage9100Tatio: '',
		dhpVillage0110Tatio: '',
		dhpVillage1115Tatio: '',
		dhpVillage1620Tatio: '',
		dhpVillage21AfterTatio: '',
		dhpVillageIndoorProperty: '',
	}
	proxy.resetForm("housingCostRef");
}

/** 查询人口和建筑物概况（区县）列表 */
function getList() {
	loading.value = true;
	getAllPeoBuildData(queryParams.value).then(response => {
		dataList.value = response.data.rows;
		total.value = response.data.total;
		loading.value = false;
	});
} /** 查询人口和建筑物概况（乡镇）列表 */
function getList1() {
	loading.value = true;
	getAllVillageTownHosPeo(queryParams.value).then(response => {
		dataList.value = response.data.rows;
		total.value = response.data.total;
		loading.value = false;
	});
}
// 新增
function handleAdd() {
	title.value = "新增人口和建筑物概况"
	idDetail.value = false;
	open.value = true;
	reset();
}
// 修改
function handleUpdate(row) {
	reset();
	if (!isShowVillageTown.value) {
		title.value = "修改区（县）人口和建筑物概况"
	} else {
		title.value = "修改乡镇（街道）人口和建筑物概况"
	}
	idDetail.value = false;
	getDetail(row.dhpId)
}

function handleDetail(row) {
	reset();
	if (!isShowVillageTown.value) {
		title.value = "查看区（县）人口和建筑物概况"
	} else {
		title.value = "查看乡镇（街道）人口和建筑物概况"
	}
	idDetail.value = true;
	getDetail(row.dhpId)
}

function getDetail(id) {
	if (!isShowVillageTown.value) {
		getPeoBuildData(id).then(response => {
			form.value = response.data;
			editProvinceFormData(response.data.provinceId, response.data.cityId)
			open.value = true;
		})
	} else {
		getVillageTownData(id).then(response => {
			form.value = response.data;
			editProvinceFormData(response.data.provinceId, response.data.cityId)
			open.value = true;
		})
	}

}

/** 删除按钮操作 */
function handleDelete(row) {
	const id = row.dhpId;
	var area = '';
	if (!isShowVillageTown.value) {
		if (row.province == row.city) {
			area = row.province + row.prefecture
		} else {
			area = row.province + row.city + row.prefecture
		}
		proxy.$modal.confirm('是否确认删除人口建和筑物概况为"' + area + '"的数据项？').then(function () {
			return delPeoBuildData(id);
		}).then((res) => {
			getList();
			proxy.$modal.msgSuccess('删除成功');
		}).catch(() => { });
	} else {
		if (row.province == row.city) {
			area = row.province + row.prefecture + row.villageTown
		} else {
			area = row.province + row.city + row.prefecture + row.villageTown
		}
		proxy.$modal.confirm('是否确认删除人口建和筑物概况为"' + area + '"的数据项？').then(function () {
			return delVillageTownData(id);
		}).then((res) => {
			getList1();
			proxy.$modal.msgSuccess('删除成功');
		}).catch(() => { });
	}

};

/** 提交按钮 */
function submitForm() {
	console.log()
	if (!isShowVillageTown.value) {
		proxy.$refs["housingCostRef"].validate(valid => {
			console.log(form.value)
			if (valid) {
				if (form.value.dhpId == null) {
					saveBuildPeoData(form.value).then(response => {
						proxy.$modal.msgSuccess("保存成功");
						open.value = false;
						getList();
					});
				} else {
					updateBuildPeoData(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						open.value = false;
						getList();
					});
				}
			}
		});
	} else {
		proxy.$refs["housingCostRef"].validate(valid => {
			if (valid) {
				if (form.value.dhpId == null) {
					saveVillageTownData(form.value).then(response => {
						proxy.$modal.msgSuccess("保存成功");
						open.value = false;
						getList1();
					});
				} else {
					updateVillageTownData(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						open.value = false;
						getList1();
					});
				}
			}
		});
	}

}

/** 取消按钮 */
function cancel() {
	open.value = false;
	reset();
}

/** 获取省列表 */
function getProvinceData() {
	getProvince().then(response => {
		provinceData.value = response.data;
	});
}

function chooseProvince(value) {
	// console.log(value)
	queryParams.value.cityId = null;
	queryParams.value.prefectureId = null;
	cityData.value = [];
	areaData.value = [];
	getChildArea(value).then(response => {
		cityData.value = response.data;
	});
	//provinceData.value.map(item => {//遍历数据
	//  if (item.id == value) {
	//    if (item.name == "北京市" || item.name == "天津市" || item.name == "上海市" || item.name == "重庆市") {
	//      cityData.value.push(JSON.parse(JSON.stringify(item)));
	//    } else {
	//      getChildArea(value).then(response => {
	//        cityData.value = response.data;
	//      });
	//    }
	//    return;
	//  }
	//})
}

function chooseCity(value) {
	queryParams.value.prefectureId = null;
	areaData.value = [];
	getChildArea(value).then(response => {
		areaData.value = response.data;
	});
}

function editProvinceFormData(provinceId, cityId) {
	getProvince().then(response => {
		provinceData.value = response.data;
	});
	getChildArea(provinceId).then(response => {
		cityData.value = response.data;
	});
	getChildArea(cityId).then(response => {
		areaData.value = response.data;
	});
}
/*切换标签页*/
function handleClick(tab, event) {
	console.log(tab.props.name);
	if (tab.props.name == "first") {
		isShowVillageTown.value = false;
		getList();
	} else {
		isShowVillageTown.value = true;
		getList1();
	}
}
// 权限
const isAdmin = async () => {
	let res = await getLanderRoles()
	const { code, data } = res
	if (code == 200) {
		const auth = data.split(',')
		return auth
	} else {
		return Promise.reject(new Error(data))
	}
}
const getDefaultProvice = async () => {
	try {
		let curAuth = await isAdmin()
		const type1 = curAuth.length == 1 && (curAuth.includes('省管理员') || curAuth.includes('省业务员'))
		const type2 = curAuth.length == 2 && curAuth.includes('省管理员') && curAuth.includes('省业务员')
		if (type1 || type2) {
			getLanderProvince().then(res => {
				if (res.code == 200) {
					queryParams.value.provinceId = res.data
					chooseProvince(queryParams.value.provinceId)
					getList()
				}
			})
		} else {
			getList()
		}
	} catch (error) {

	}
}
getDefaultProvice();
getProvinceData();
</script>

<style lang="scss" scoped>
.ratio {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;

	.ratioContent {
		width: 33.33%;
		border: 1px solid #e5ebf7;
		display: inline-block !important;

		.ratioHead {
			margin: 0px;
			text-align: center;
			height: 40px;
			line-height: 40px;
			background: #f5f9fe;
			font-weight: 700;
			font-size: 14px;
			color: #606266;
		}

		.inp {
			margin: 0px;
			height: 40px;
			border-top: 1px solid #e5ebf7;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;

			:deep(.el-input-number).is-without-controls .el-input__inner {
				width: 200px;
			}
		}
	}
}
</style>